/* eslint-disable jsx-a11y/alt-text */
import React from 'react';
import './style/yinlianzhuanzhang.css';
import Navbar from '../component/Navbar';
import { Toast, InputItem } from 'antd-mobile';
import { CopyToClipboard } from 'react-copy-to-clipboard';

class YinLianZhuanZhang extends React.Component {

    copy() {
        console.log(111111111111)
        Toast.info('复制成功', 1);
    }
    goBack = () => {
        this.props.history.goBack();
    }
    sucess() {
        Toast.success('充值成功', 1)
    }
    render() {
        return (
            <div className='yinlianzhuanzhang'>
                <Navbar onClick={this.goBack} title='银联转账'></Navbar>
                <div className='scroll'>
                    <div className='info'>
                        <span className='title'>请在15分钟内完成转账：</span>
                        <div className='item'>
                            <div className='left'>
                                <span>收款账户： </span>
                                <span >6226 3456 6767 3434 232</span>
                            </div>
                            <CopyToClipboard
                                text="6226 3456 大111大大  6767 3434 232" // 需要复制的文本
                            >
                                <a href="javascript:;" onClick={this.copy} className='right' >复制</a>
                            </CopyToClipboard>
                        </div>
                        <div className='item'>
                            <div className='left'>
                                <span>收款银行：</span>
                                <span ref={(e) => this.copy2 = e}>中国工商银行</span>
                            </div>
                            <span className='right' onClick={() => { this.copy(this.copy2) }}>复制</span>
                        </div>
                        <div className='item'>
                            <div className='left'>
                                <span>账户姓名： </span>
                                <span ref={(e) => this.copy3 = e}>张三</span>
                            </div>
                            <span className='right' onClick={() => { this.copy(this.copy3) }}>复制</span>
                        </div>
                        <div className='item'>
                            <div className='left'>
                                <span>充值金额： </span>
                                <span ref={(e) => this.copy4 = e} style={{ color: '#F98743' }}>￥200.00</span>
                            </div>
                            <span className='right' onClick={() => { this.copy(this.copy4) }}>复制</span>
                        </div>
                    </div>
                    <div className='info1 flex'>
                        <img className="flexImg" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1608431072,669449145&fm=27&gp=0.jpg" />
                        <div className="flexRight flex-1">
                            <div className="flex align-center">
                                <div class="flex-1">
                                    <div>支付宝账号</div>
                                    <div>XXXX</div>
                                </div>
                                <span className='right' onClick={() => { this.copy(this.copy4) }}>复制</span>
                            </div>
                            <div className="flex align-center">
                                <div class="flex-1">
                                    <div>收款人</div>
                                    <div>XXXX</div>
                                </div>
                                <span className='right' onClick={() => { this.copy(this.copy4) }}>复制</span>
                            </div>
                        </div>
                    </div>
                    <div className='ddxx'>
                        <span className='title'>订单信息：</span>
                        <div className='input'>
                            <span>付款人：</span>
                            <InputItem
                                className="flex-1"
                                placeholder='输入付款人姓名'
                            ></InputItem>
                        </div>
                        <div className='input'>
                            <span>付款账号：</span>
                            <InputItem
                                className="flex-1"
                                type='number'
                                placeholder='输入付款账户号'
                            ></InputItem>
                        </div>
                        <div className='bottom' style={{ marginTop: '1.5rem' }}>
                            <span>订单号：</span>
                            <span>6226 3456 6767 3434 232</span>
                        </div>
                        <div className='bottom' style={{ marginTop: '1rem' }}>
                            <span>收款时间：</span>
                            <span>2020-4-21 12:23:24</span>
                        </div>
                    </div>
                    <div className='wxts'>
                        <span className='title'>温馨提示：</span>
                        <span style={{ marginTop: '1.5rem' }} className='item'>该账户为对公账户，请放心转账！</span>
                        <span className='item'>1、登录手机银行APP或者网上银行</span>
                        <span className='item'>2、实时转账</span>
                    </div>
                </div>
                <div className='foot'>
                    <span onClick={this.goBack}>取消充值</span>
                    <span onClick={() => this.sucess()}>我已转账</span>
                </div>
            </div>
        )
    }
}

export default YinLianZhuanZhang;